<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>demo-iselect</title>
<link href="../jsease.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.iselect
    {
    border:0;
    width:180px;
    }
    .iselect .cap
        {
        height:25px;
        width:100%;
        position:relative;
        }
        .iselect .cap .tit,
        .iselect .cap .sel
            {
            border:1px solid #abadb3;
            background:#fff;
            overflow:hidden;
            }
        .iselect .cap .tit .textval
            {
            width:100%;
            border:0;
            height:17px;
            line-height:17px;
            padding:3px 2px;
            cursor:default;
            }
        .iselect .cap .sel
            {
            padding:0;
            width:18px;
            position:absolute;
            right:0;
            top:0;
            border:0;
            text-align:center;
            }
            .iselect .cap .sel a.msa
                {
                text-decoration:none;
                outline:0;
                color:#00f;
                display:block;
                border:1px solid #abadb3;
                }
            .iselect .cap .sel a.msa .selA
                {
                width:16px;
                height:9px;
                line-height:9px;
                padding:2px 0 0;
                background:#fff;
                }
            .iselect .cap .sel a.msa .selV
                {
                padding:0 0 2px;
                height:10px;
                }
            .iselect .cap .sel a:hover.msa .selA
                {
                background:#def;
                }
    .iselect .opts
        {
        border:1px solid #abadb3;
        overflow-y:auto;
        background:#fff;
        text-align:left;
        }
        .iselect .opts a.opt
            {
            margin:0;
            outline:0;
            text-decoration:none;
            overflow:hidden;
            }
            .iselect .opts a.opt .txt
                {
                line-height:17px;
                height:17px;
                color:#000;
                }
            .iselect .opts a.sel .txt
                {
                background:#6af;
                color:#fff;
                }
                .iselect .opts a:hover.opt .txt
                    {
                    background:#39f;
                    color:#fff;
                    }
            .iselect .opts a.opt .txt .text,
            .iselect .opts a.opt .txt .title
                {
                float:left;
                }
            .iselect .opts a.opt .txt .title
                {
                width:50px;
                }
</style>
<script type="text/javascript" src="../core.js"></script>
<script type="text/javascript" src="../mask.js"></script>
<script type="text/javascript" src="../ipop.js"></script>
<script type="text/javascript" src="../iselect.js"></script>
</head>

<body>
<div style="background:#ffe;text-align:center;">
<div class="iselect">
    <div class="cap">
        <div class="tit"><input type="text" class="textval" value="2010" /></div>
        <div class="sel"><a class="msa" href="#"><div class="selA">&#9650;</div><div class="selA selV">&#9660;</div></a></div>
    </div>
</div>
<div class="iselect" style="height:120px">
    <div class="opts">
        <a class="opt" href="#"><div class="txt">1</div></a>
        <a class="opt" href="#"><div class="txt">2</div></a>
        <a class="opt" href="#"><div class="txt">3</div></a>
        <a class="opt" href="#"><div class="txt">4</div></a>
        <a class="opt" href="#"><div class="txt">5</div></a>
        <a class="opt" href="#"><div class="txt"><div class="title">6</div><div class="text">6-1</div></div></a>
        <a class="opt" href="#"><div class="txt">7</div></a>
        <a class="opt sel" href="#"><div class="txt"><div class="title">8</div><div class="text">8-1</div></div></a>
        <a class="opt" href="#"><div class="txt">9</div></a>
        <a class="opt" href="#"><div class="txt">10</div></a>
        <a class="opt" href="#"><div class="txt">11</div></a>
        <a class="opt" href="#"><div class="txt">12</div></a>
        <a class="opt" href="#"><div class="txt">1</div></a>
    </div>
</div>
<input id="caldate" name="caldate" value="2010-06-20" type="text" readonly="readonly" style="padding:3px;margin:5px;" /></div>
<div id="demo" style="width:800px;margin:0 auto;">
<input type="button" value="天干" onclick='adds(t12);' />
<input type="button" value="五行" onclick='adds(wuxing);' />
<input type="button" value="五行+春夏秋冬" onclick='mysel.clearOpts();adds(wuxing.concat(cxqd));' />
<input type="button" value="春夏秋冬" onclick='adds(cxqd);' />
<input type="button" value="清除所有" onclick='mysel.clearOpts();' />
</div>

<script type="text/javascript">
//<![CDATA[
var wuxing = [{text: {text:'金',title:'金'}, value: '金'}, {text: {text:'木',title:'木'}, value: '木'}, {text: {text:'水',title:'水'}, value: '水'}, {text: {text:'火',title:'火'}, value: '火'}, {text: {text:'土',title:'土'}, value: '土'}];
var cxqd = [{text: {text:'春',title:'清'}, value: '春'}, {text: {text:'夏',title:'调'}, value: '夏'}, {text: {text:'秋',title:'补'}, value: '秋'},{text: {text:'冬',title:'防'}, value: '冬', sel: 1 }];
var t12 = [{text: {text:'子',title:'子'}, value: '111'},{text: {text:'丑',title:'丑'}, value: '222' }, {text: {text:'寅',title:'寅'}, value: '333'}, {text: {text:'卯',title:'卯'}, value: '444'},{text: {text:'辰',title:'辰'}, value: '555'}, {text: {text:'巳',title:'巳'}, value: '666'}, {text: {text:'午',title:'午'}, value: '777', sel: 1},{text: {text:'未',title:'未'}, value: '888'}, {text: {text:'申',title:'申'}, value: '999'}, {text: {text:'酉',title:'酉'}, value: '101010'}, {text: {text:'戌',title:'戌'}, value: '111111'}, {text: {text:'亥',title:'亥'}, value: '121212'}];
def( 'mysel', 'iselect', { id:'myisel', elem:'demo', optheight:19, optwidth:198, opts: [] } );

function adds(a) {
mysel.addOpts(a);
return false;
};
//]]>
</script>
</body>
</html>